<%--
  Created by IntelliJ IDEA.
  User: cjrh2
  Date: 2025/5/26
  Time: 18:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

<button onclick="sendGetRequest()">get</button>
<button onclick="sendPostRequest()">post</button>


<script>


    function sendGetRequest() {
        const xhr = new XMLHttpRequest();
        const url = 'http://localhost:8080/jquery/msb';

        xhr.open('GET', url, true); // true 表示异步请求

        xhr.onload = function () {
            if (xhr.status >= 200 && xhr.status < 300) {
                // 请求成功，解析 JSON 响应
                const response = JSON.parse(xhr.responseText);
                console.log('GET 请求成功:', response);
            } else {
                console.error('GET 请求失败:', xhr.statusText);
            }
        };

        xhr.onerror = function () {
            console.error('网络错误');
        };

        xhr.send(); // 发送 GET 请求（无请求体）
    }

    // 调用 GET 请求
    // sendGetRequest();


    function sendPostRequest() {
        const xhr = new XMLHttpRequest();
        const url = 'http://localhost:8080/jquery/msc';
        const data = JSON.stringify({name: 'Charlie', age: 25, email: 'charlie@qq.com'}); // 请求体数据

        xhr.open('POST', url, true); // true 表示异步请求
        xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头

        xhr.onload = function () {
            if (xhr.status >= 200 && xhr.status < 300) {
                // 请求成功，解析 JSON 响应
                const response = JSON.parse(xhr.responseText);
                console.log('POST 请求成功:', response);
            } else {
                console.error('POST 请求失败:', xhr.statusText);
            }
        };

        xhr.onerror = function () {
            console.error('网络错误');
        };

        xhr.send(data); // 发送 POST 请求（带请求体）
    }

    // 调用 POST 请求
    // sendPostRequest();

    // const url = 'http://localhost:8080/jquery/msb';
    function fetchData() {
        fetch('http://localhost:8080/jquery/msb')
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                console.log('获取的数据:', data);
                // 处理返回的数据
                document.getElementById('result').textContent = JSON.stringify(data, null, 2);
            })
            .catch(error => {
                console.error('获取数据失败:', error);
            });
    }
</script>

</body>
</html>
